<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>供应商数据表格</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../../../static/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../../static/style/admin.css" media="all">
</head>
<body>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body">
                    <table class="layui-hide" id="supplier" lay-filter="test"></table>

                    <script type="text/html" id="test-table-toolbar-toolbarDemo">

                        <div class="">
                            <div class="layui-inline ">
                                <input type="search" name="search" lay-verify="title" autocomplete="off" placeholder="请输入关键字"
                                       class="layui-input layui-input-search" id="select">
                            </div>
                            <button class="layui-btn layui-btn-sm layui-btn-radius" lay-event="search">
                                <i class="layui-icon layui-icon-search" style="font-size: 8px; "></i> 搜索
                            </button>
                            <button class="layui-btn layui-btn-sm layui-btn-radius" lay-event="add">
                                <i class="layui-icon layui-icon-addition" style="font-size: 8px; " ></i>新增</button>
                        </div>

                    </script>

                    <script type="text/html" id="test-table-toolbar-barDemo">
                        <a class="layui-btn layui-btn-xs layui-btn-radius" lay-event="edit">编辑</a>
                        <a class="layui-btn layui-btn-danger layui-btn-xs layui-btn-radius" lay-event="del">删除</a>
                    </script>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="../../../static/layui/layui.js"></script>
<script th:inline="none">
    layui.config({
        base: '../../../static/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table','form', 'laydate', 'element', 'jquery'], function() {
        var admin = layui.admin
            , table = layui.table;

        var $ = layui.$
            ,element = layui.element
            ,layer = layui.layer
            ,admin = layui.admin
            , table = layui.table
            ,laydate = layui.laydate
            ,form = layui.form;

        element.render();

        laydate.render({
            elem: '#LAY-component-form-group-date'
        });

        table.render({
            elem: '#supplier'
            ,url: '/buy/querySupplier'
            ,toolbar: '#test-table-toolbar-toolbarDemo'
            ,title: '供应商数据表'
            ,contentType: 'application/json'
            , method: 'post'
            ,cols: [[
                {type: 'checkbox', fixed: 'left'}
                ,{field: 'id', title: '编号', width:80, align:'center'}
                ,{field: 'supplierid', title: '供应商编号', width: 100, align:'center'}
                ,{field: 'supplier_Name', title: '供应商公司名称', width:140, align:'center' }
                ,{field: 'address', title: '地址', width: 100, align:'center'}
                ,{field: 'phone',title: '电话', width: 180, align:'center'}
                ,{field: 'person',title: '联系人名', width: 180, align:'center'}
                ,{field: 'email',title: '邮箱', width: 180, align:'center'}
                ,{field: 'type',title: '供应商类型(衣裙裤)', width: 180, align:'center'}
                ,{fixed: 'right', title:'操作', toolbar: '#test-table-toolbar-barDemo', width:150, align:'center'}
            ]]

            ,page: true
        });


        //监听行工具事件
        table.on('tool(test)', function(obj){
            var data = obj.data;
            if(obj.event === 'del'){
                layer.confirm('你确定要删除吗？', {
                    btn: ['确定', '取消'] //按钮
                }, function () {
                    // 发送请求删除
                    $.ajax({
                        url: '/buy/deleteSupplier',
                        type: 'get',
                        data: 'id=' + data.id,
                        success: function (data) {
                            if (data.code === 200) {
                                // 删除成功
                                layer.msg('删除成功', {icon: 1});
                                // 表格重载
                                table.reload('supplier', {});
                            } else {
                                layer.msg('删除失败', {icon: 2});
                            }
                        }
                    })
                }, function () {
                    // 取消
                    layer.msg("取消删除", {icon: 7})
                });
            } else if(obj.event === 'edit'){
                //免加载页面弹窗
                Comment(data, "编辑")
            }
        });

        //触发事件
        table.on('toolbar(test)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            if (obj.event === 'add') {
                var tpldata = {
                    "id": "",
                    "supplierid": '',
                    "supplier_Name": '',
                    "address": '',
                    "phone": '',
                    "person": '',
                    "email":'',
                    "type": ""
                };
                Comment(tpldata, "添加");
            }  else if (obj.event === 'search') {

                // 获取到搜索框的内容
                var search = $("#select").val();

                console.log(search);

                // 表格重载
                table.reload('suppler', {
                    url: '/buy/querySupplier',
                    where: {
                        'queryString': search
                    }
                })
            }
        });
    });

    /**
     * 编辑和添加功能
     * @param {Object} supplier 用户数据
     * @param features 功能
     */
    function Comment(supplier, features) {
        layui.use(['layer', 'laytpl'], function () {
            var $ = layui.$;//重点处,layui有内置jquery模块
            var layer = layui.layer, laytpl = layui.laytpl;
            //给模板 tpl-supplier 传递参数
            var tpldata = {
                "features": features,
                "id": supplier.id,
                "supplierid": supplier.supplierid,
                "supplier_Name": supplier.supplier_Name,
                "address": supplier.address,
                "phone": supplier.phone,
                "person": supplier.person,
                "email": supplier.email,
                "type": supplier.type

            };
            //获取id为tpl-supplier的noscript标签的html内容,不能使用innerHtml
            laytpl(document.getElementById('tpl-supplier').innerText)
                .render(tpldata, function (html) {
                    //渲染完成后直接打开
                    layer.open({
                        type: 1,
                        shade: false,
                        area: ['60%', 'auto'],
                        title: false, //不显示标题
                        content: html,
                    });
                });
        });
    }





</script>
</body>

<!--添加和编辑页面-->
<noscript id="tpl-supplier">
    <!-- style 尽量不要影响到页面其他元素,使用#supplierinfo范围限定 -->
    <style type="text/css">
        #supplierinfo .layui-required:after {
            content: "*";
            color: red;
            position: absolute;
            top: 10px;
            right: 5px;
        }
    </style>
    <div class="layui-card" id="supplierinfo">
        <div class="layui-card-header">{{d.features}}</div>
        <div class="layui-card-body">
            <form class="layui-form" action="" lay-filter="info">

                <div class="layui-form-item">
                    <label class="layui-form-label layui-required">供应商编号</label>
                    <div class="layui-input-block">
                        <input type="text" name="supplierid" lay-verify="required" lay-reqtext="供应商编号是必填项"
                               autocomplete="off" value="{{d.supplierid}}" placeholder="请输入供应商编号" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label layui-required">供应商公司名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="supplier_Name" lay-verify="required" lay-reqtext="供应商公司名称是必填项"
                               autocomplete="off" value="{{d.supplier_Name}}" placeholder="请输入供应商公司名称" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label layui-required">地址</label>
                    <div class="layui-input-block">
                        <input type="text" name="address" lay-verify="required" lay-reqtext="地址是必填项"
                               autocomplete="off" value="{{d.address}}" placeholder="请输入地址" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label layui-required">电话</label>
                    <div class="layui-input-block">
                        <input type="text" name="phone" lay-verify="required" lay-reqtext="电话是必填项"
                               autocomplete="off" value="{{d.phone}}" placeholder="请输入电话" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label layui-required">联系人</label>
                    <div class="layui-input-block">
                        <input type="text" name="person" lay-verify="required" lay-reqtext="联系人是必填项"
                               placeholder="请输入联系人"
                               autocomplete="off" value="{{d.person }}" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label layui-required">邮箱</label>
                    <div class="layui-input-block">
                        <input type="text" name="email" lay-verify="required" lay-reqtext="邮箱是必填项"
                               placeholder="请输入邮箱"
                               autocomplete="off" value="{{d.email }}" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label layui-required">供应商类型(衣裙裤)</label>
                    <div class="layui-input-block">
                        <input type="text" name="type" lay-verify="required" lay-reqtext="供应商类型(衣裙裤)是必填项"
                               placeholder="请输入供应商类型(衣裙裤)"
                               autocomplete="off" value="{{d.type }}" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button type="submit" class="layui-btn tt layui-btn-radius " lay-submit="" lay-filter="demo1" >
                            立即提交
                        </button>
                        <button type="reset" class="layui-btn layui-btn-primary layui-btn-radius">重置</button>
                    </div>
                </div>
            </form>
            <!-- 下方script标签中不能使用单行注释语句,否则laytpl编译解析会报错-->
            <!-- 语句之间也要严格用分号隔开,因为laytpl编译时,那些换行都被去掉了,导致代码连在一起 -->
            <script>
                layui.use(['jquery', 'form'], function () {
                    var $ = layui.$,
                        form = layui.form,
                        layer = layui.layer,
                        laydate = layui.laydate;


                    form.verify({
                        contentRule: function (value) {
                            if (value.length < 5) {
                                return '标题至少得5个字符啊';
                            }
                        },
                    });
                    form.on('submit(demo1)', function (data) {
                        /**可以在ajax 地址中,传入user_id参数*/
                        console.log(data.field);
                        if ("{{d.features}}" === "添加") {
                            console.log("供应商信息添加");
                            $.ajax({
                                url: '/buy/addSupplier',
                                type: 'POST',
                                dataType: 'json',
                                contentType: 'application/json;charset=UTF-8',
                                data: JSON.stringify(data.field),
                                success: function (data) {
                                    console.log(data);
                                    if (data.code === 200) {
                                        layer.msg("添加成功", {icon: 1})
                                    } else {
                                        layer.msg("添加失败", {icon: 2})
                                    }
                                    layer.closeAll();
                                }
                            });
                        } else {
                            data.field['id'] = "{{d.id}}";
                            $.ajax({
                                url: '/buy/editSupplier',
                                type: 'POST',
                                dataType: 'json',
                                contentType: 'application/json;charset=UTF-8',
                                data: JSON.stringify(data.field),
                                success: function (data) {
                                    console.log(data);
                                    if (data.code === 200) {
                                        layer.msg("编辑成功", {icon: 1})
                                    } else {
                                        layer.msg("编辑失败", {icon: 2})
                                    }
                                    layer.closeAll();
                                }
                            });
                        }

                    });
                    /** 要使用render,复杂表单才能显示 */
                    form.render();

                });
            </script>
        </div>
    </div>
</noscript>
</html>